<template>
  <div id="new">
    <div class="headline">
      <img src="/img/icon/icon_zhekou.svg" width="30" alt="图片丢失" />
      <h2>News & Knowledge</h2>
    </div>
    <div class="main scroll">
      <div class="item" v-for="(item, index) of context_list" :key="index">
        <div class="item_head">
          <a :href="item.link">
            <div>
              <img :src="item.img_url" alt="Picture loss" />
            </div>
            <p>{{ item.title }}</p>
          </a>
        </div>
        <div class="item_foot">
          <p>{{ item.describe }}</p>
        </div>
        <div class="item_link"><a :href="item.link">Read more ></a></div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "new",
  data() {
    return {
      context_list: [
        {
          img_url:
            "https://okmarts.com/jeecg-boot/sys/common/view/temp/magefan_blog/202302/Dorman%20604-935%20HVAC%20Blend%20Door%20Actuator-min.png",
          link: "javascript:void(0)",
          title: "How to Replace a Blend Door Actuator?",
          describe:
            "Blend door actuators control the temperature and flow of air in the vehicle. If your vehicle only releases cold air, or you can't change the airflow, it may be due to a faulty actuator. Sometimes repairs require recalibration, and sometimes you need to replace broken parts.",
        },
        {
          img_url:
            "https://okmarts.com/jeecg-boot/sys/common/view/temp/magefan_blog/202302/Dorman%20604-935%20HVAC%20Blend%20Door%20Actuator-min.png",
          link: "javascript:void(0)",
          title: "How to Replace a Blend Door Actuator?",
          describe:
            "Blend door actuators control the temperature and flow of air in the vehicle. If your vehicle only releases cold air, or you can't change the airflow, it may be due to a faulty actuator. Sometimes repairs require recalibration, and sometimes you need to replace broken parts.",
        },
        {
          img_url:
            "https://okmarts.com/jeecg-boot/sys/common/view/temp/magefan_blog/202302/Dorman%20604-935%20HVAC%20Blend%20Door%20Actuator-min.png",
          link: "javascript:void(0)",
          title: "How to Replace a Blend Door Actuator?",
          describe:
            "Blend door actuators control the temperature and flow of air in the vehicle. If your vehicle only releases cold air, or you can't change the airflow, it may be due to a faulty actuator. Sometimes repairs require recalibration, and sometimes you need to replace broken parts.",
        },
        {
          img_url:
            "https://okmarts.com/jeecg-boot/sys/common/view/temp/magefan_blog/202302/Dorman%20604-935%20HVAC%20Blend%20Door%20Actuator-min.png",
          link: "javascript:void(0)",
          title: "How to Replace a Blend Door Actuator?",
          describe:
            "Blend door actuators control the temperature and flow of air in the vehicle. If your vehicle only releases cold air, or you can't change the airflow, it may be due to a faulty actuator. Sometimes repairs require recalibration, and sometimes you need to replace broken parts.",
        },
        {
          img_url:
            "https://okmarts.com/jeecg-boot/sys/common/view/temp/magefan_blog/202302/Dorman%20604-935%20HVAC%20Blend%20Door%20Actuator-min.png",
          link: "javascript:void(0)",
          title: "How to Replace a Blend Door Actuator?",
          describe:
            "Blend door actuators control the temperature and flow of air in the vehicle. If your vehicle only releases cold air, or you can't change the airflow, it may be due to a faulty actuator. Sometimes repairs require recalibration, and sometimes you need to replace broken parts.",
        },
        {
          img_url:
            "https://okmarts.com/jeecg-boot/sys/common/view/temp/magefan_blog/202302/Dorman%20604-935%20HVAC%20Blend%20Door%20Actuator-min.png",
          link: "javascript:void(0)",
          title: "How to Replace a Blend Door Actuator?",
          describe:
            "Blend door actuators control the temperature and flow of air in the vehicle. If your vehicle only releases cold air, or you can't change the airflow, it may be due to a faulty actuator. Sometimes repairs require recalibration, and sometimes you need to replace broken parts.",
        },
        {
          img_url:
            "https://okmarts.com/jeecg-boot/sys/common/view/temp/magefan_blog/202302/Dorman%20604-935%20HVAC%20Blend%20Door%20Actuator-min.png",
          link: "javascript:void(0)",
          title: "How to Replace a Blend Door Actuator?",
          describe:
            "Blend door actuators control the temperature and flow of air in the vehicle. If your vehicle only releases cold air, or you can't change the airflow, it may be due to a faulty actuator. Sometimes repairs require recalibration, and sometimes you need to replace broken parts.",
        },
        {
          img_url:
            "https://okmarts.com/jeecg-boot/sys/common/view/temp/magefan_blog/202302/Dorman%20604-935%20HVAC%20Blend%20Door%20Actuator-min.png",
          link: "javascript:void(0)",
          title: "How to Replace a Blend Door Actuator?",
          describe:
            "Blend door actuators control the temperature and flow of air in the vehicle. If your vehicle only releases cold air, or you can't change the airflow, it may be due to a faulty actuator. Sometimes repairs require recalibration, and sometimes you need to replace broken parts.",
        },
        {
          img_url:
            "https://okmarts.com/jeecg-boot/sys/common/view/temp/magefan_blog/202302/Dorman%20604-935%20HVAC%20Blend%20Door%20Actuator-min.png",
          link: "javascript:void(0)",
          title: "How to Replace a Blend Door Actuator?",
          describe:
            "Blend door actuators control the temperature and flow of air in the vehicle. If your vehicle only releases cold air, or you can't change the airflow, it may be due to a faulty actuator. Sometimes repairs require recalibration, and sometimes you need to replace broken parts.",
        },
        {
          img_url:
            "https://okmarts.com/jeecg-boot/sys/common/view/temp/magefan_blog/202302/Dorman%20604-935%20HVAC%20Blend%20Door%20Actuator-min.png",
          link: "javascript:void(0)",
          title: "How to Replace a Blend Door Actuator?",
          describe:
            "Blend door actuators control the temperature and flow of air in the vehicle. If your vehicle only releases cold air, or you can't change the airflow, it may be due to a faulty actuator. Sometimes repairs require recalibration, and sometimes you need to replace broken parts.",
        },
      ],
    };
  },
};
</script>

<style lang="less" scoped>
@import "@/less/color";
.headline {
  height: 30px;
  display: flex;
  align-items: center;
  margin-bottom: 30px;
  h2 {
    margin-left: 5px;
    display: inline-block;
  }
}
/*  ----------  */
.main {
  overflow-x: scroll;
  overflow-y: hidden;
  white-space: nowrap;
}
.item {
  display: inline-block;
  background: white;
  width: 210px;
  padding: 0;
  margin: 10px;
  border-radius: 8px;
  overflow: hidden;
  white-space: pre-wrap;
  a {
    color: black;
  }
}
.item_head {
  width: 100%;
  img {
    transition: 0.2s;
    width: 100%;
  }
  div {
    overflow: hidden;
  }
  p{
    padding: 20px;
  }
  a {
    transition: 0.4s;
  }
}
.item:hover {
  .item_head a {
    color: @color-primary;
  }
  img {
    transform: scale(1.2);
  }
}
.item_foot {
  padding: 15px;
  p {
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-all;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    color: @color-info;
  }
}
a {
  transition: 0.4s;
}
a:hover {
  color: @color-primary;
}
.item_link{
  padding: 15px;
  margin: 0 0 15px;
}
</style>